<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-sc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">实时监控</span>
      </div>
      <div class="flex-sc cursor fw" v-if="publicStore._public.voltageList && publicStore._public.voltageList.length > 1">
        <span class="mlr5">/</span>
        <span class="bob-white-1" @click.stop="configStore.voltage = '', configStore.bay = ''">全电压</span>
      </div>
      <div class="flex-sc cursor fw" v-if="publicStore._public.bayList && publicStore._public.bayList.length > 1 && !isNull(publicStore.voltage)">
        <span class="mlr5">/</span>
        <span class="bob-white-1" @click.stop="configStore.bay = ''">{{find(publicStore._public.voltageList, ['id', publicStore.voltage], 'name')}}</span>
      </div>
      <div class="flex-sc cursor fw" v-if="publicStore._public.bayList && publicStore._public.bayList.length > 1 && !isNull(publicStore.voltage) && !isNull(publicStore.bay)">
        <span class="mlr5">/</span>
        <span class="bob-white-1">{{find(publicStore._public.bayList, ['id', publicStore.bay], 'name')}}</span>
      </div>
      <div class="flex-ec cursor flex1" 
      v-if="(publicStore._public.voltageList && publicStore._public.voltageList.length == 0 && publicStore._public.bayList && publicStore._public.bayList.length == 0 && isNull(publicStore.voltage) && isNull(publicStore.bay)) || 
      (!isNull(publicStore.voltage) && !isNull(publicStore.bay))">
        <div class="ml15 mr10">通信</div>
        <el-select :prefix-icon="Search" v-model="state.offline" style="width: 10%;" placeholder="请选择" clearable filterable>
          <el-option label="全部" value="" />
          <el-option v-for="(v, i) in state.offlineList" :key="v.value" :label="v.name" :value="v.value" />
        </el-select>
        <div class="ml15 mr10">诊断</div>
        <el-select :prefix-icon="Search" v-model="state.alarm" style="width: 10%;" placeholder="请选择" clearable filterable>
          <el-option label="全部" value="" />
          <el-option v-for="(v, i) in state.alarmList" :key="v.alarm_code" :label="v.alarm_name" :value="v.alarm_code" />
        </el-select>
        <div class="ml15 mr10">名称</div>
        <el-input :prefix-icon="Search" v-model="state.text" style="width: 15%;" placeholder="请输入" clearable filterable />
      </div>
    </div>
    <div class="ww100 hh100 overlay p12 flex-ss warp">
      <!-- 电压列表 -->
      <div v-if="publicStore._public.voltageList && publicStore._public.voltageList.length > 0 && isNull(publicStore.voltage) && isNull(publicStore.bay)"
        class="rad8 p15 list4-12 tc cursor relative newbox f24 tc"
        v-for="(vvv, iii) in isNull(publicStore._public.voltageList)? [] : publicStore._public.voltageList" :key="iii"
        @click.stop="configStore.voltage = vvv.id">
          <img class="w100" src="@/assets/images/supply.png" />
          <div class="mt10">{{vvv.name}}</div>
          <div class="mt10 flex-cc">
             <div class="flex1 flex-col-cc i21">
               <span class="f14">总数</span>
               <span class="mt5">{{vvv.count}}</span>
             </div>
             <div class="flex1 flex-col-cc i6">
               <span class="f14">离线</span>
               <span class="mt5">{{vvv.offline}}</span>
             </div>
             <div class="flex1 flex-col-cc i8">
               <span class="f14">告警</span>
               <span class="mt5">{{vvv.alarm}}</span>
             </div>
          </div>
      </div>
      <!-- 间隔列表 -->
      <div v-else-if="publicStore._public.bayList && publicStore._public.bayList.length > 0 && !isNull(publicStore.voltage) && isNull(publicStore.bay)"
        class="rad8 p15 list4-12 tc cursor relative newbox f24 tc"
        v-for="(vv, ii) in isNull(publicStore._public.bayList)? [] : publicStore._public.bayList.filter(a=>!publicStore.voltage || a.voltage == publicStore.voltage)" :key="ii"
        @click.stop="configStore.bay = vv.id">
          <img class="w100" src="@/assets/images/bay.png" />
          <div class="mt10">{{vv.name}}</div>
          <div class="mt10 flex-cc">
             <div class="flex1 flex-col-cc i21">
               <span class="f14">总数</span>
               <span class="mt5">{{vv.count}}</span>
             </div>
             <div class="flex1 flex-col-cc i6">
               <span class="f14">离线</span>
               <span class="mt5">{{vv.offline}}</span>
             </div>
             <div class="flex1 flex-col-cc i8">
               <span class="f14">告警</span>
               <span class="mt5">{{vv.alarm}}</span>
             </div>
          </div>
      </div>
      <!-- 设备列表 -->
      <div v-else class="rad8 p18 list4-12 tc cursor relative" 
        :class="v.isAlarm?v.isAlarm=='0'?'newbox':'alarmbox':'newbox'" 
        :key="i" @click.stop="toPath('/chart', {id: v.id, name: v.name, type: v.type, instlPos: v.instlPos})"
         v-for="(v, i) in isNull(publicStore._public.list)? [] : publicStore._public.list
         .filter(a=>!state.text || a.name.toLowerCase().indexOf(state.text.toLowerCase()) != -1)
         .filter(a=>!configStore.bay || a.bayNum == configStore.bay)
         .filter(a=>!state.offline || a.offline == state.offline)
         .filter(a=>!state.alarm || a.isAlarm == state.alarm)">
        <div class="absolute t0 l0 w30 h25 lh25" style="border-radius: 0 0 10px 0; border-right: 1px solid rgba(65, 255, 255, 0.2); border-bottom: 1px solid rgba(65, 255, 255, 0.2);">{{i+1}}</div>
        <div class="ww100 hh100 pl10 tl relative" >
          <!-- 特殊 -->
          <else-list1 :v="v" v-if="v.type=='未定义'" />
           <!-- 默认 -->
          <main-list :v="v" v-else />
        </div>
      </div>
      <div v-if="isNull(publicStore._public.list)" class="flex-cc ww100 tc ptb13">没有数据</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import mainList from "@/views/async/new/list/main";
import elseList1 from "@/views/async/new/list/else1";
const route = useRoute();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const configStore = proxy.configStore();
const state = reactive({
  ...publicStore.$state,
  // bayList: [],
  alarmList: [],
  offline: '',
  alarm: '',
  offlineList: [
    {name: '在线', value: '0'},
    {name: '离线', value: '1'},
  ],
});
onMounted(async () => {
  init();
});

const init = async () => {
  let query = {"o":"o_sensor_alarm_type", "p": [route.query.type], "i": 0}
  let params = {queryApi: query}
  let res = await publicStore.post(params)
  state.alarmList = proxy.isNull(res)? [] : res
};

// const init = async () => {
//   let query1 = {"o":"o_wf_bay", "p": [publicStore.distributId]}
//   let query2 = {"o":"o_sensor_alarm_type", "p": [route.query.type], "i": 0}
//   let params = {queryApi1: query1, queryApi2: query2}
//   let res = await publicStore.post(params)
//   state.bayList = proxy.isNull(res.queryApi1)? [] : res.queryApi1
//   state.alarmList = proxy.isNull(res.queryApi2)? [] : res.queryApi2
// };
</script>

<style scoped lang="scss">
.newbox{
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(65, 255, 255, 0.2);
  box-sizing: border-box;
  height: auto;
}
.alarmbox{
  background: rgba(255, 86, 86, 0.1);
  border: 1px solid rgba(255, 86, 86, 0.4);
  box-sizing: border-box;
  height: auto;
}
</style>
